<template>
<div>
 <div style="display:flex;justify-content:center;padding-top:30px">
 
    <div style=" margin-right: 20px ">
      <div>
        <frame1 width="508px" slotContentHeight="59px">
          <div slot="title">选择播放模式</div>
          <div slot="content" class="choice">
            <choice @change="change"  :options="playModel" />
          </div>
        </frame1>
      </div>
      <div>
        <frame1 width="508px" slotContentHeight="620px">
          <div slot="title">文件播放</div>
          <div slot="content">
            <roll height="560px">
              <filePlay v-show="show===0" @fileId="fileId" />
              <textPlay v-show="show===1" @textPlay="setUp" />
              <soundCard v-show="show===2" />
            </roll>
          </div>
        </frame1>
      </div>
    </div>
    <div>
      <div>
        <frame1 width="1020px" slotContentHeight="59px">
          <div slot="title">选择终端</div>
          <div slot="content">
            <div style="display:flex">
              <div style="width:418px; margin-left: 30px;  padding-top: 10px; ">
                <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
              </div>
              <el-button type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </frame1>
      </div>
      <!-- 已分组 -->
      <div>
        <frame1 width="1020px" slotContentHeight="425px" slotPadding="0">
          <div slot="content">
            <roll height="420px">
              <!-- <div v-for="(item,index) in list" :key="index"> -->
              <EquipmentSelection :list="list" @Check="groupCheck" />
              <!-- </div> -->
            </roll>
          </div>
        </frame1>
      </div>
      <!-- 未分组 -->
      <div>
        <frame1 width="1020px" slotContentHeight="240px" slotPadding="0">
          <div slot="content">
            <roll height="230px">
              <!-- <div v-for="(item,index) in NotGrouped" :key="index"> -->
              <EquipmentSelection :list="NotGrouped" @Check="unGroupCheck" />
              <!-- </div> -->
            </roll>
          </div>
        </frame1>
      </div>
    </div>
  </div>
  <div class="block">
    <el-button @click="start" style="background:#00968e;color:#fff">开始广播</el-button>
    <el-button @click="end" type="danger">停止广播</el-button>
  </div>

</div>
 
</template>
<script>
import frame1 from "@/components/frame";
import roll from "@/components/Roll";
import EquipmentSelection from "./children/EquipmentSelection";
import choice from "./children/choice";
import filePlay from "./children/filePlay";
import textPlay from "./children/textPlay";
import soundCard from "./children/soundCard";

export default {
  data() {
    return {
      show: 0,
      input: "",
      //  播放模式
      playModel: [
        {
          label: "文件播放",
          value: 0
        },
        {
          label: "文本播放.MP3",
          value: 1
        },
        {
          label: "声卡播放",
          value: 2
        }
      ],
      // 已经分组的
      list: [],
      // 未分组的
      NotGrouped: [],
      targetIds: [], //已经分组的id
      NotGroupedIds: [], //未分组的id
      task: {
        taskId: "",
        run: "",
        type: 0,
        randomPlay: 1,
        bcText: "", //用于文本播放
        voiceSpeed:0
      },
      fileIds: [] //文件数组
    };
  },
  watch: {
    targetIds(a) {
      // console.log(a);
    }
  },
  mounted() {
    this.getGrouplist();
  },
  methods: {
    // 播放模式
    change(e) {
      this.task.type = e;
      this.show = e;
    },
    // 选择的文件id
    fileId(e) {
      this.fileIds = e;
    },
    // 文本播放传值
    setUp(e) {
      this.task.bcText=e.bcText
      this.task.voiceSpeed=e.voiceSpeed
    },
    start() {
      this.task.run = true;
      this.targetIds.concat(this.NotGroupedIds);
      this.task["targetIds"] = this.targetIds;
      this.task["fileIds"] = this.fileIds;
      this.taskItem().then(res=>{
            localStorage.setItem('taskId',res.data.data)
            this.taskId=res.data.data
      })
    },
    end() {
      
       this.task.taskId= localStorage.getItem('taskId')
      this.task.run = false;
        this.taskItem().then(res=>{
          console.log(res)
        })
    },
    // 开始播放和暂停播放
    async taskItem() {
      return await this.$http.post(
        "/api/threesuns/imcControl/ipCasts/realPlay",
        this.task
      );
    },

    unGroupCheck(item) {
      var arr = item
        .toString()
        .split(",")
        .filter(item => {
          if (item != "") {
            return item;
          }
        });
      this.NotGroupedIds = [...new Set(arr)];
    },
    groupCheck(item) {
      var arr = item
        .toString()
        .split(",")
        .filter(item => {
          if (item != "") {
            return item;
          }
        });
      this.targetIds = [...new Set(arr)];
    },
    search() {
        this.getGrouplist()
    },
    getGrouplist() {
      this.$http
        .get("/api/threesuns/imcControl/ipCasts/soundPosts?name="+this.input)
        .then(res => {
          res.data.data.grouped.map(item => {
            item.isIndeterminate = false;
            item.checkedCities = [];
            item.children.forEach(e => {
              e.isIndeterminate = false;
              return e;
            });
            return item;
          });
          this.list = res.data.data.grouped;
          res.data.data.ungrouped.forEach(item => {
            item.isIndeterminate = false;
          });
          var ungrouped = [
            {
              groupName: "未分组",
              children: res.data.data.ungrouped,
              isIndeterminate: false,
              checkedCities: []
            }
          ];
          this.NotGrouped = ungrouped;
        });
    }
  },
  components: {
    choice,
    frame1,
    filePlay,
    roll,
    EquipmentSelection,
    textPlay,
    soundCard
  }
};
</script>
<style scoped>
.choice {
  padding-top: 10px;
  display: flex;
  justify-content: center;
}
.el-button {
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.block {
  text-align: center;
}
.el-button {
  background-color: #00968e;
  border: none;
}
</style>